<script setup>
import { ref,onMounted } from 'vue'
import { queryLogisticsPrice,addLogisticsPriceApi,queryLogisticsPriceById,updateLogisticsPrice,deleteLogisticsPrice } from '../../api/logisticsprice'
import { queryLogisticsCompanyAll } from '../../api/logisticscompany'
import { ElMessage } from 'element-plus'

//所有公司name集合
const companyNameList = ref([])
const getCompanyNameList = async () => { 
  const result = await queryLogisticsCompanyAll()
  companyNameList.value = result.data
}

//定义弹出框数据
const title = ref(null)
const dialogShow = ref(false)
const dialogData = ref({companyName:'',cubePrice:'',kilogramPrice:'',transKilometerPrice:'',category:''})
//定义表单数据
const logisticsPriceDate = ref({companyName:'',category:''})

//定义类型数据
const categoryList = ref([{id:1,name:'同城'},{id:2,name:'同省'},{id:3,name:'跨省'},{id:4,name:'经济区互寄'}])

//定义分页的变量
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
//定义分页的点击事件
const handleSizeChange = (val) => {
  page.value = 1
  query()
}
const handleCurrentChange = (val) => {
  query()
}
//定义table的变量
const logisticsPriceList = ref([])
//定义查询的点击事件
const query = async () => { 
  const result = await queryLogisticsPrice(page.value,pageSize.value,logisticsPriceDate.value.companyName,logisticsPriceDate.value.category)
  logisticsPriceList.value = result.data.rows
  total.value = result.data.total
}
//定义清空表单的点击事件
const clear = () => { 
  logisticsPriceDate.value = {companyName:'',category:''}
  query()
}
//挂载
onMounted(() => {
  query()
  getCompanyNameList()
})

//添加的点击事件
const saveLogisticsPrice = () => { 
  title.value = '添加物流价格'
  dialogShow.value = true
  // 清空表单数据
  dialogData.value = {companyName:'',cubePrice:'',kilogramPrice:'',transKilometerPrice:'',category:''}
    // 清空表单校验
  if(ruleFormRef.value){
    ruleFormRef.value.resetFields()
  }
  
}

//保存的点击事件
const savelogisticsPriceInfo = async () => { 
  let result = null
  if(dialogData.value.id){
    //修改
    result = await updateLogisticsPrice(dialogData.value)
  }else{
    //添加
    result = await addLogisticsPriceApi(dialogData.value)
  }
  if(result.code){
    ElMessage.success('操作成功！')
    dialogShow.value = false
    query()
  }else{
    ElMessage.error('操作失败！请重新操作')
  }
}

//回显查询数据
const edit = async (id)=>{
  title.value = '修改物流公司'
  dialogShow.value = true
  const result = await queryLogisticsPriceById(id) 
  dialogData.value = result.data
}

//删除仓库
const deleteById = async (id)=>{
  const result = await deleteLogisticsPrice(id) 
  if(result.code){
    ElMessage.success('操作成功！')
    query()
  }else{
    ElMessage.error('操作失败！请重新操作')
  }
}

//定义表单引用的ref
const ruleFormRef = ref(null)
// 验证规则
const rules = ref({
  cubePrice: [
    { required: true, message: '请输入每立方费用', trigger: 'blur' },
    { pattern: /^([0-9]{1,})(.[0-9]{1,2})?$/, message: '请输入正确的金额格式，最多两位小数', trigger: 'blur' }
  ],
  kilogramPrice: [
    { required: true, message: '请输入每千克费用', trigger: 'blur' },
    { pattern: /^([0-9]{1,})(.[0-9]{1,2})?$/, message: '请输入正确的金额格式，最多两位小数', trigger: 'blur' }
  ],
  transKilometerPrice: [
    { required: true, message: '请输入每千米运输费用', trigger: 'blur' },
    { pattern: /^([0-9]{1,})(.[0-9]{1,2})?$/, message: '请输入正确的金额格式，最多两位小数', trigger: 'blur' }
  ],
});
</script>
<template>
<div><h4>物流价格管理</h4></div>
<div>
  <el-form :inline="true" :model="logisticsPriceDate" class="demo-form-inline">
    <el-form-item>
      <el-button type="primary" @click="saveLogisticsPrice"><el-icon><Plus /></el-icon></el-button>
    </el-form-item>
    <el-form-item>
      <el-input v-model="logisticsPriceDate.companyName" placeholder="物流公司名称" />
    </el-form-item>
    <el-form-item>
      <el-select v-model="logisticsPriceDate.category" placeholder="类型" style="width: 200px;">
        <el-option v-for="item in categoryList" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="query">查询</el-button>
      <el-button type="default" @click="clear">清空</el-button>
    </el-form-item>
  </el-form>
</div>

<!-- table表格 -->
<div>
  <el-table :data="logisticsPriceList" border style="width: 100%" >
    <el-table-column fixed type="index" label="序号" align="center"  width="80"/>
    <el-table-column prop="companyName" label="物流公司名称" align="center"  width="200"/>
    <el-table-column prop="cubePrice" label="每立方费用" align="center" width="200"/>
    <el-table-column prop="kilogramPrice" label="每千克费用" align="center" width="200"/>
    <el-table-column prop="transKilometerPrice" label="每千米运输费用" align="center" width="200"/>
    <el-table-column prop="category" label="类型" align="center" width="200">
      <template #default="scope">
        <el-tag v-if="scope.row.category == 1">同城</el-tag>
        <el-tag v-else-if="scope.row.category == 2">同省</el-tag>
        <el-tag v-else-if="scope.row.category == 3">跨省</el-tag>
        <el-tag v-else-if="scope.row.category == 4">经济区互寄</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" align="center" width="200"/>
    <el-table-column fixed="right" label="操作" align="center" width="120">
      <template #default="scope">
        <el-button type="primary" size="small" @click="edit(scope.row.id)"><el-icon><EditPen /></el-icon></el-button>
        <el-button type="danger" size="small" @click="deleteById(scope.row.id)"><el-icon><Delete /></el-icon></el-button>
      </template>
    </el-table-column>
  </el-table>
</div>

<!-- 分页 -->
<div>
  <el-pagination
  v-model:current-page="page"
  v-model:page-size="pageSize"
  :page-sizes="[5, 10, 15, 20]"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"/>
</div>


<!-- 弹出框 -->
<div>
  <el-dialog v-model="dialogShow" :title="title" width="500" align-center>
    <el-form :model="dialogData" :rules="rules" ref="ruleFormRef">
      <el-form-item label="物流公司" :label-width="formLabelWidth">
        <el-select v-model="dialogData.companyName" placeholder="请选择物流公司名称">
          <el-option v-for="item in companyNameList" :label="item.companyName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="每立方费用" :label-width="formLabelWidth" prop="cubePrice">
        <el-input v-model="dialogData.cubePrice" placeholder="每立方费用" />
      </el-form-item>
      <el-form-item label="每千克费用" :label-width="formLabelWidth" prop="kilogramPrice">
        <el-input v-model="dialogData.kilogramPrice" placeholder="每千克费用" />
      </el-form-item>
      <el-form-item label="每千米运输费用" :label-width="formLabelWidth" prop="transKilometerPrice">
        <el-input v-model="dialogData.transKilometerPrice" placeholder="每千米运输费用" />
      </el-form-item>
      <el-form-item label="类型" :label-width="formLabelWidth">
        <el-select v-model="dialogData.category" placeholder="请选择物流类型">
          <el-option v-for="item in categoryList" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogShow = false" type="default">取消</el-button>
      <el-button type="primary" @click="savelogisticsPriceInfo">确定</el-button>
    </template>
  </el-dialog>
</div>
</template>
<style scoped>
</style>